/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  PixelRatio,
  Text,
  View,
  ScrollView
} from 'react-native';

import Navigator from 'react-native-navigator'

import List from './list'

import path from 'react-native-path'

export default class ReactNativeToolKit extends Component {
  render() {
    return (
      <Navigator initialRoute={{scene: Welcome}}/>
    );
  }
}

class Welcome extends Component {
  constructor(props) {
    super(props);
  
    this.state = {
      title: 'Welcome',
      scenes: [
        {title:'ENVSupport', scene: require('./env-support').default},
        {title:'Toast', scene: require('./toast').default},
        {title:'QRCode', scene: require('./qrcode').default},
        {title:'File', scene: require('./file').default},
        {title: 'DownloadManager', scene: require('./download-manager').default},
        {title: 'SQLite', scene: require('./sqlite').default}
      ]
      
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <Navigator.NavigationBar navigator={this.props.navigator} 
          title={this.state.title}
        />
        <List style={styles.func_list} onItemSelected={(index)=> {
          this.props.navigator.push(this.state.scenes[index]);
        }}>
          {this.state.scenes.map((scene, index)=> <Text key={index}>{scene.title}</Text>)}
        </List>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  func_list: {
    paddingTop: 78
  }
});

AppRegistry.registerComponent('ReactNativeToolKit', () => ReactNativeToolKit);